<!-- <template>
    <div class="guanzhu">
       <h3>底部的关注</h3>
    </div>
</template> -->

<!-- <script>
    export default {
        name:"Guanzhu"
    }
</script>

<style lang="less" scoped>

</style> -->
<template>
    <div class="guanzhu">
      <!-- <h3> 榜单</h3> -->
      <FooterMusicVue></FooterMusicVue>
      <div class="my-tab">
        <div class="tabcitem">
          <div class="my-hohot">
            <div class="istop">
              <div class="mainimg" @click="back()">
                <div class="backicon"><svg class="icon" aria-hidden="true">
             <use xlink:href="#icon-arrow-left-bold"> </use>    
            </svg>   </div>
                <div class="mu-usprt"></div>
                <div class="hottime">"更新日期:" "02月23日"</div>
              </div>
            </div>
          </div>
        </div>
      </div>
  
      <div class="hopcontent" v-for="(item, i) in singerSongData" :key="i">
        <div class="singlist" @click="updateIndex(item)">
        <!-- <div class="singlist" @click="ViewSingerSong(item.song.artists.id)"> -->
          <!-- <a class="m-sgitem" href="//music.163.com/m/song?id=1997438791"> -->
            <div class="m-sgitem"> 
            <div class="sgfl sgfl-cred">{{ i + 1 }}</div>
            <div class="sgfr f-bd f-bd-btm">
              <div class="sgchfl">
                <div class="f-thide sgtl">{{ item.name }}</div>
                <div class="f-thide sginfo*" v-for="(itemone, index) in item.artists" :key="index">
                  <i class="u-hmsprt sghot"> </i>
                {{ itemone.name }}
                </div>
              </div>
              <div class="sgchfr">
                <span class="u-hmsprt sgchply"> </span>
              </div>
            </div>
          <!-- </a> -->
        </div>
        </div>
      </div>
      <hr class="ishr" />
      <!-- <div class="guanzhu" v-if="Object.keys(baseInfo).length"> -->
      <!-- <div class="left">
          <img v-lazy="cover" alt />
        </div> -->
      <!-- <div class="right">
          <h3>
            <b-tag color="var(--main-color)" plain>专辑</b-tag>
            {{ baseInfo.name }}
          </h3>
          <div class="right-item">
            <b-button
              background="var(--main-color)"
              color="#fff"
              :style="{ border: `none` }"
              round
              class="button"
              @click="handlePlayMusic"
            >
              <i class="iconfont icon-bofang" />播放全部
            </b-button>
            <b-button round class="button">
              <i class="iconfont icon-shoucang" />
              收藏({{ albumDetail.subCount }})
            </b-button>
            <b-button round class="button">
              <i class="iconfont icon-fenxiang" />
              分享({{ albumDetail.shareCount }})
            </b-button>
          </div>
          <div class="right-item">
            <span>歌手：{{ baseInfo.artist.name }}</span>
          </div>
          <div class="right-item">
            <span>时间：{{ getCreateDate }}</span>
          </div>
        </div> -->
    </div>
  </template>
  
  <script>
  import { formatDate } from "../utils/tool";
  import FooterMusicVue from "../components/item/FooterMusic.vue";
  // import SongboplayVue from "../components/item/FooterMusic.vue";
  
  //引用才能解构
  import { mapMutations } from "vuex";
  
  import { mapState } from "vuex";
  
  export default {
    name: "Guanzhu",
    components: {
      FooterMusicVue,
    },
    data() {
      return {
        //引入搜索关键
        keyWordList: [],
        singerSongData: [],
        singlist: [],
      };
    },
    created() {
      //截取传过来歌手的id
      //获取歌手的id
      let singerId = this.$route.params.id;
      this.gwtSongBySing();
    },
  
    mounted() {
      this.keyWordList = JSON.parse(localStorage.getItem("keyWordList"))
        ? JSON.parse(localStorage.getItem("keyWordList"))
        : [];
    },
    methods: {
      ...mapMutations([
        "backplay",
        "play",
        "duration",
        "updateDuration",
        "gettheLyricone",
        "updateCurrentTime",
        "updateIsbtnShow",
        "updateDetailShow",
        
        "setIsMain"
      ]),
  
      back: function () {
        // this.$refs.audio.paused
        // console.log("输出的$refs" ,$refs);
        let isback = true;
        if (isback) {
          this.$children[0].backplay();
        } else {
        }
        this.$router.back();
      },
  
  
      ViewSingerSong(id){
         this.setIsMain(false);
         this.$router.push({name:"Danqu",params:{id}});
      },
  
      updateIndex: function (item) {
        console.log("isitem===>", item);
  
        item.al = item;
        item.al.picUrl = item.picUrl;
        item.al.name = item.name;
        // item.al.picUrl = item.singlis.picUrl;
        // item.al.name = item.name;
  
        //进行提交使用pushPlayList函数 vuex里面
        this.$store.commit("pushPlayList", item);
        //播放push到最后的一首歌 vux里
        this.$store.commit(
          "updatePlayListIndex",
          this.$store.state.playList.length - 1
        );
      },
  
      //获取热门歌曲榜歌曲
      gwtSongBySing(){
        this.axios({
          method:"get",
          url:"/personalized/newsong",
          params:{
            limit:20
          }
        }).then((res) => {
          console.log("歌曲的热歌榜",res.data.result);
          this.singerSongData = res.data.result
  
  
        }).catch((err)=> {
          console.log(err);
        })
      }
  
    },
  };
  </script>
  
  <style lang="less" scoped>
  .guanzhu {
    .my-tab {
      color: #333;
      outline: 0;
      width: 100%;
      height: 100%;
      display: block;
      .tabcitem {
        width: 100%;
        height: 100%;
  
        .my-hohot {
          padding: 0;
          margin: 0;
          .istop {
            position: relative;
            padding-top: 38.9%;
            overflow: hidden;
            background: url(//s3.music.126.net/mobile-new/img/hot_music_bg_2x.jpg?f01a252…=)
              no-repeat;
            background-size: contain;
            .mainimg {
              display: flex;
              flex-direction: column;
  
              justify-content: center;
              position: absolute;
              left: 0;
              right: 0;
              top: 0;
              bottom: 0;
              z-index: 2;
              padding-left: 20px;
              box-sizing: border-box;
              .backicon{
                position: relative;
                top: 23px;
                left:-18px;
              }
              .mu-usprt {
                width: 142px;
                height: 67px;
                background: url(//s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28…=)
                  no-repeat;
                background-size: 166px 97px;
                background-position: -24px -30px;
              }
            }
          }
          .istop::after {
            content: " ";
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 1;
            background-color: rgba(0, 0, 0, 0.2);
          }
        }
      }
    }
    .hopcontent {
      position: relative;
      width: 100%;
      height: 100%;
      color: #333;
      .singlist {
        position: relative;
        .m-sgitem {
          display: flex;
          padding-left: 10px;
          text-decoration: none;
          cursor: pointer;
          margin: 0 auto;
          .sgfl-cred {
            display: flex;
            color: #999999;
            align-items: center;
            justify-content: center;
            width: 40px;
            font-size: 17px;
            margin-left: -10px;
          }
          .f-bd-btm {
            flex: 1 1 auto;
            -webkit-box-flex: 1;
            display: flex;
            position: relative;
            &::after {
              width: 200%;
              height: 200%;
              transform: scale(0.5);
              border-bottom-width: 1px;
              position: absolute;
              z-index: 2;
              content: "";
              top: 0;
              left: 0;
              pointer-events: none;
              box-sizing: border-box;
              transform-origin: top left;
            }
            .sgchfl {
              width: 0;
              padding: 6px 0;
              flex: 1 1 auto;
              .sgtl {
                font-size: 17px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                word-break: normal;
              }
              .sginfo {
                font-size: 12px;
                color: #888;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: normal;
                .sghot {
                  display: inline-block;
                  width: 12px;
                  height: 8px;
                  margin-right: 4px;
                  background: url(//s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28…=)
                    no-repeat;
                  background-size: 166px 97px;
                  font-style: normal;
                }
              }
            }
            .sgchfr {
              display: flex;
              align-items: center;
              padding: 0 10px;
              .sgchply {
                display: inline-block;
                width: 22px;
                height: 22px;
                background: url(//s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28…=)
                  no-repeat;
                background-size: 166px 97px;
                background-position: -24px 0;
              }
            }
          }
        }
      }
    }
  }
  </style>
  <!-- <style lang="less" scoped>
  
      .button {
      width: 100%;
      padding: 10px 0px;
      display: flex;
      position: relative;
      .left {
        width: 200px;
        img {
          width: 100%;
        }
      }
      .right {
        flex: 1;
        padding-left: 35px;
        h3 {
          padding: 5px 0px;
        }
        &-item {
          padding: 5px 0px;
          display: flex;
          align-items: center;
          font-size: 14px;
          .creator-name {
            margin: 0px 10px;
          }
          .iconfont {
            margin-right: 8px;
          }
          .button {
            margin-right: 15px;
          }
        }
      }
    }
    .desc {
      padding: 10px 0px;
      font-size: 13px;
      span {
        color: var(--tag-color);
      }
      &-title {
        padding-top: 5px;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
    }
    .play {
      display: flex;
      align-items: center;
      position: absolute;
      right: 10px;
      top: 10px;
      font-size: 13px;
      &-left {
        padding: 5px;
        border-right: 1px solid var(--border);
      }
      &-right {
        padding: 5px;
      }
    }
    </style> -->
  